<!DOCTYPE html>
<html lang="en">
<head>
    #include("../include/header.html")

    <style type="text/css">
        .container .items {
            border: 1px solid #EEEEEE;
            padding: 10px;
            margin-bottom: 15px;
            background-color: #d7d4d4;
            height: 150px;
        }
    </style>
</head>
<body>

<div class="container">
    #include("../include/menu.html")

    <div id="projectList" class="row">

    </div>
</div>

#include("../include/footer.html")

<script id="header_project_list_template" type="text/x-handlebars-template">
    <div class="col-lg-3 col-md-6 col-md-4">
        <div class="thumbnail">
            <img src="" alt="...">
            <div class="caption">
                <h3><a href="/project/form?id={{this.id}}">{{this.name}}</a></h3>
                <p>{{this.description}}</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
            </div>
        </div>
    </div>
    {{#each data}}
    <div class="col-lg-3 col-md-6 col-md-4">
        <div class="thumbnail">
            <img src="" alt="...">
            <div class="caption">
                <h3><a href="/project/form?id={{this.id}}">{{this.name}}</a></h3>
                <p>{{this.description}}</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
            </div>
        </div>
    </div>
    {{/each}}
</script>

<script>
    $(function () {
        $.get(pathPrefix + '/getListAll', function (data, status) {
            console.log(data);
            if (data && data.result === 100 && data.data) {
                var source = document.getElementById("header_project_list_template").innerHTML;
                var template = Handlebars.compile(source);

                console.log(data);
                var html = template(data);
                $('#projectList').html(html);
            }
        });
    });
</script>


</body>
</html>